<template>
  <el-scrollbar class="category">
    <p v-for="item in categoryList" :key="item.value" :class="{'active':item.value === currentCategory}"
       @click="toggleCategory(item.value)">{{ item.label }}</p>
  </el-scrollbar>
</template>

<script lang="ts">
import {defineComponent, ref, toRefs} from "vue";
import {useCategoryStore} from '@/stores/category'

export default defineComponent({
  props: {
    currentCategory: {
      type: String,
      required: true
    }
  },
  setup(props, {emit, attrs, slots}) {

    const {currentCategory} = toRefs(props)

    const {categoryList} = useCategoryStore()
    /**
     * 切换菜单
     * @param index
     */
    const toggleCategory = (index: string) => {
      emit('changeCategory', index)
    }

    return {
      currentCategory, categoryList, toggleCategory
    }
  }
})
</script>

<style scoped lang="less">
.category {
  width: 200px;
  margin-right: 20px;
  p {
    background-color: #171d2d;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #dcdbde;
    &:not(:last-of-type) {
      margin-bottom: 15px;
    }
    &.active {
      background-color: #333232;
    }
  }
}
</style>